<template>
  <div class="box">
    <router-view v-slot="{ Component }">
    <transition name="fade">
        <component :is="Component" />
    </transition>
  </router-view>
  </div>
</template>

<script>
 
 
import { useRouter } from "vue-router";
import { computed, inject,onMounted } from "vue";
export default {
  beforeRouteEnter(to, from, next) {
  if (JSON.parse(localStorage.getItem("vuex")).apprrr) {
    
    console.log('to',to,'from', from);
     next({name:'about'})
    // next()
  } else {
    next();
  }
},
  setup() {
    const store = inject("store");
    const router = useRouter();
    // router.beforeEach((to, from, next) => {
    //   console.log(`entering component from ${from.path} to ${to.path}`)
    //   next()
    // });
   
    router.beforeEach((to, from, next) => {
      document.documentElement.classList.add("transition");
      next();
    });

    router.afterEach(() => {
      document.documentElement.classList.remove("transition");
    });

    return {
    
    };
  },
};
</script>

<style lang="less" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.box {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ff6b6b;
  animation: rainbow 10s ease infinite;
}

@keyframes rainbow {
  0% {
    background-color: hsl(0, 80%, 70%);
  }
  10% {
    background-color: hsl(30, 80%, 70%);
  }
  20% {
    background-color: hsl(60, 80%, 70%);
  }
  30% {
    background-color: hsl(90, 80%, 70%);
  }
  40% {
    background-color: hsl(120, 80%, 70%);
  }
  50% {
    background-color: hsl(150, 80%, 70%);
  }
  60% {
    background-color: hsl(180, 80%, 70%);
  }
  70% {
    background-color: hsl(210, 80%, 70%);
  }
  80% {
    background-color: hsl(240, 80%, 70%);
  }
  90% {
    background-color: hsl(270, 80%, 70%);
  }
  100% {
    background-color: hsl(300, 80%, 70%);
  }
}
</style>
